<template>
  <div class="scrollBox">

    <el-row style="padding: 20px" :gutter="10">
      <el-col style="margin-bottom: 10px" :span="6" v-for="(item, index) in resultTableList" :key="index">
        <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="hover">
          <div @click="goDetail(item)">
            <el-image v-if="item.fileType === 3"
                      :src="item.coverUrl"
                      :preview-src-list="item.filePreviewList" fit="fill"
                      style="width: 100%; height: 150px"></el-image>
            <el-image v-else
                      :src="item.coverUrl"
                      fit="fill" style="width: 100%; height: 150px"></el-image>
            <div style="padding: 14px;">
              <span>{{ item.name }}</span>
            </div>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <!-- 视频-->
    <el-dialog
      :title="videoTitle"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer1" :playsinline="true"
                      :options="playerOptions">
        </video-player>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
import {videoPlayer} from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      dialogVisible: false,
      videoTitle : '',
      url: 'https://sj.shopec.com.cn/image-server/operation_guide/',//文件地址
      bascisList: [{
        name: '电脑端操作文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '行知租车电脑端操作文档.pdf',
        coverUrl:'操作手册封面.png'
      }, {
        name: '运营端小程序操作文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '行知租车运营端小程序操作文档.pdf',
        coverUrl:'操作手册封面.png'
      }, {
        name: 'GPS安装说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '行知租车GPS安装说明文档.pdf',
        coverUrl:'说明文档封面.png'
      }, {
        name: '信用免押注册流程说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '信用免押注册流程.pdf',
        coverUrl:'说明文档封面.png'
      }/*, {
        name: 'OTA使用说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '行知租车OTA使用说明文档.pdf',
        coverUrl:'说明文档封面.png'
      }*/, {
        name: '微信商户申请说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '行知租车微信商户说明文档.pdf',
        coverUrl:'说明文档封面.png'
      }, {
        name: '微信小程序申请说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '行知租车微信小程序说明文档.pdf',
        coverUrl:'说明文档封面.png'
      },{
        name: '企业微信通知接入说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '企业微信通知接入流程.pdf',
        coverUrl:'说明文档封面.png'
      },{
        name: '钉钉通知接入说明文档',
        fileType: 1,//1.pdf, 2视频 3.图片
        fileTypeName: '文档',
        fileName: '钉钉消息通知接入流程.pdf',
        coverUrl:'说明文档封面.png'
      }, {
        name: '基础设置操作视频',
        fileType: 2,//1.pdf, 2视频 3.图片
        fileTypeName: '视频',
        fileName: '基础设置操作视频.mp4',
        coverUrl:'基础数据封面.png'
      }, {
        name: '订单操作视频',
        fileType: 2,//1.pdf, 2视频 3.图片
        fileTypeName: '视频',
        fileName: '订单操作视频.mp4',
        coverUrl:'日租订单封面.png'
      }, {
        name: '车辆管理视频',
        fileType: 2,//1.pdf, 2视频 3.图片
        fileTypeName: '视频',
        fileName: '车辆管理操作视频.mp4',
        coverUrl:'车辆封面.png'
      }, {
        name: '订单流程图',
        fileType: 3,//1.pdf, 2视频 3.图片
        fileTypeName: '图片',
        fileName: '订单流程.jpg',
        coverUrl:'系统流程图封面.png'
      }, {
        name: '系统流程图',
        fileType: 3,//1.pdf, 2视频 3.图片
        fileTypeName: '图片',
        fileName: '系统流程图.jpg',
        coverUrl:'系统流程图封面.png'
      }],
      //视频播放器配置项
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,  // 如果为true,浏览器准备好时开始回放
        muted: false,     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",  // 类型
          src: ''// url地址
        }],
        poster: '',  // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,           // 当前时间和持续时间的分隔符
          durationDisplay: true,       // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true       // 是否显示全屏按钮
        }
      },

    }
  },
  computed: {
    resultTableList() {
      let resultList = this.bascisList;
      resultList = resultList.map(item => {
        this.$set(item, 'filePreviewList', [this.url + item.fileName]);
        this.$set(item, 'coverUrl', this.url + item.coverUrl);
        return item;
      })
      return resultList;
    }

  },
  methods: {
    goDetail(item) {
      console.log('row', item);
      if (item.fileType === 1) {//文档
        this.$router.push({path: '/pdf/detail', query: {pdfSrc: item.filePreviewList[0], pdfName:item.name}})
      } else if (item.fileType === 2) {//视频
        this.playerOptions.sources[0].src = item.filePreviewList[0];
        this.videoTitle = item.name;
        this.dialogVisible = true;
      } else if (item.fileType === 3) {//图片
        //图片预览
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  height: 210px;
}

</style>
